<script lang="ts" setup>
import { ChevronRight } from 'lucide-vue-next';
import { rankApi } from '~/utils/api/rank-api';

const { data } = await rankApi.getRealTimeRankingServer();
const list1 = data.value?.data.slice(0, 4);
const list2 = data.value?.data.slice(4, 8);

const getColorClass = (index: number) => {
	switch (index) {
		case 1:
			return 'text-red-500';
		case 2:
			return 'text-orange-500';
		case 3:
			return 'text-yellow-500';
		default:
			return 'text-slate-400';
	}
};
</script>

<template>
	<div class="w-full lg:w-[21.25rem] lg:h-[380px]">
		<Card class="h-full rounded-2xl flex overflow-hidden shadow p-6 flex-col gap-3">
			<div class="w-full flex justify-between items-center">
				<div class="text-3xl font-bold">
					排行榜
				</div>
				<a
					class="flex items-center text-slate-500"
					href="#"
				>
					<div class="text-lg font-normal">查看更多</div>
					<ChevronRight />
				</a>
			</div>
			<div class="w-full">
				<div
					v-if="data?.data && data.data.length>0"
					class="grid lg:grid-cols-1 lg:gap-0 md:grid-cols-[1fr_auto_1fr] md:gap-4"
				>
					<!--     列表1     -->
					<div v-if="list1">
						<NuxtLink
							v-for="(article, index) in list1"
							:key="article.article_id"
							:to="`/article/${article.article_id}`"
						>
							<div class="flex items-center gap-2">
								<div
									:class="getColorClass(index+1)"
									class="text-3xl font-bold"
								>{{ index + 1 }}
								</div>
								<div class="text-base font-normal truncate">
									{{ article.article_title }}
								</div>
							</div>
						</NuxtLink>
					</div>
					<!--    中间竖线      -->
					<div class="lg:hidden md:block border-r border-slate-200 grid-" />
					<!--     列表2     -->
					<div v-if="list2">
						<NuxtLink
							v-for="(article, index) in list2"
							:key="article.article_id"
							:to="`/article/${article.article_id}`"
						>
							<div class="flex items-center gap-2">
								<div
									:class="getColorClass(index+4+1)"
									class="text-3xl font-bold"
								>{{ index + 4 + 1 }}
								</div>
								<div class="text-base font-normal truncate">
									{{ article.article_title }}
								</div>
							</div>
						</NuxtLink>
					</div>
				</div>
				<div v-else>
					暂无文章，请等候更新
				</div>
			</div>
		</Card>
	</div>
</template>

<style scoped>
</style>
